<template>
	<div class="login">
		<div class="login-head">
		  <h2>WElCOME ADMIN</h2>
		</div>
		<div class="login-action">
			<el-row>
				<el-col :span="24">
					<el-input
						placeholder="Please enter your account"
						v-model="UserInput.username"
						clearable>
						<i slot="prefix" class="el-input__icon el-icon-phone"></i>
					</el-input>
				</el-col>
				<el-col :span="24">
					<el-input
						placeholder="Please enter your password"
						v-model="UserInput.userpassword"
						clearable>
						<i slot="prefix" class="el-input__icon el-icon-edit"></i>
					</el-input>
				</el-col>
				<el-col :span="24">
					<el-button @click="submitLogin()"> Admin Login </el-button>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script lang="ts">
	import { Vue,Component } from "vue-property-decorator"
	import { State, Getter, Action, Mutation } from 'vuex-class'
	
	@Component
	export default class LoginComponents extends Vue {
		public UserInput:Object = {
			username: null,
			userpassword: null
		};
		
		@Mutation('SET_BAR') SET_BAR;
		
		created () {
		
		}
		
		public async submitLogin (): void {
			if(this.UserInput.username != null && this.UserInput.userpassword != null) {
				let LoginStatus = await this.$http.post({
					url: '/admin/adminLogin',
					params: this.UserInput
				});
				
				if(LoginStatus.status == 200) {
					localStorage.setItem('status', this.$utils.compile(LoginStatus.result));
					this.$router.replace({ name: 'all' })
				} else {
					this.$notify.error({
						title: '提示',
						message: '账户名和密码不正确'
					});
				}
			}else {
				this.$notify.error({
					title: '提示',
					message: '账户名和密码不能为空'
				});
			}
		}
		
		beforeRouteEnter (to, from, next) {
			next(vm => {
			  vm.SET_BAR(false)
			})
		}

		beforeRouteLeave (to, from, next) {
			this.SET_BAR(true)
		}
	}
</script>

<style scoped lang="less">
	.login {
		width: 100%;
		margin: 0 auto;
		padding-left: 0;
		.el-button {
			width: 100%;
		}
		.el-col-24 {
			margin-top: 10px;
		}
		.login-head {
			width: 100%;
			height: 300px;
			text-align: center;
			background: linear-gradient(315deg, #571c94 0%, #e609cf 100%);
			color: #fff;
			letter-spacing: 2px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.login-action {
			width: 400px;
			margin: 0 auto;
			margin-top: 30px;
		}
	}
</style>